<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2023-10-31 13:17:36
 * @LastEditors: voanit
 * @LastEditTime: 2023-10-31 18:04:40
-->
<template>
  <div>
    <!-- 按钮 -->
    <button
      :type="nativeType"
      class="pie-btn"
      :class="`pie-btn-${type} ${plain ? 'pie-btn-plain' : ''} ${
        disabled ? 'disabled' : ''
      }`"
      :style="`width:${width}px; color:${
        type === 'default' || plain ? color : '#fff'
      }; background:${!plain ? color : '#fff'}; border-color:${
        borderColor || color
      };`"
      @click="onClick"
    >
      <slot></slot>
    </button>
  </div>
</template>
<script lang="ts" setup>
import { PropType } from 'vue';
import { useHandler } from './hooks';
import { NativeType } from './types';

const emit = defineEmits<{
  (event: 'click', e: MouseEvent): void;
}>();

const props = defineProps({
  // 原生 button 标签的 type 属性
  nativeType: {
    type: String as PropType<NativeType>,
    default: 'button', // button|reset|submit
  },
  // 宽度
  width: {
    type: String,
    default: '',
  },
  // 类型
  type: {
    type: String,
    validator: (value: string) =>
      value === 'default' ||
      value === 'primary' ||
      value === 'success' ||
      value === 'info' ||
      value === 'warning' ||
      value === 'danger',
    default: 'default',
  },
  // 朴素按钮
  plain: {
    type: Boolean,
  },
  // 禁用状态
  disabled: {
    type: Boolean,
  },
  // 图标按钮
  icon: {
    type: String,
    default: '',
  },
  // 自定义颜色
  color: {
    type: String,
    default: '',
  },
  //边框颜色
  borderColor: {
    type: String,
    default: '',
  },
});

const { onClick } = useHandler(emit,props);
</script>
<style lang="less" scoped>
</style>
